<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .img-box {
            width: 60%;
            max-width: 230px;
            margin: 10% auto 0;
            border: 1px solid #333;

        }

        .img-box img {
            width: 100%;

            perspective: 600px;
            transform-origin: center center;
            transform-style: preserve-3d;
            /* transform: rotateY(45deg) rotateX(10deg); */
        }

        #tip {
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(255, 255, 255, .5)
        }
    </style>
</head>

<body>
    <div class="img-box">
        <img src="./img/IPhone_X.png" alt="" id="img_b">
    </div>
    <p id="tip"></p>
</body>
<script type="text/javascript" src="../orienter.min.js"></script>
<script>
    var img_b = document.getElementById('img_b');

    var o = new Orienter();
    var tip = document.getElementById('tip');
    var first = {
        hadset: !1,
        x: 0,
        y: 0,
        z: 0
    };
    o.onOrient = function (obj) {

        if (!first.hadset) {
            first.x = obj.b;
            first.y = obj.g;
            first.z = obj.a;
            first.hadset = true;
        }
        tip.innerHTML =
            'alpha:' + obj.a +
            '<br>' + 'beta:' + obj.b +
            '<br>' + 'gamma:' + obj.g +
            '<br>' + 'longitude:' + obj.lon +
            '<br>' + 'latitude:' + obj.lat +
            '<br>' + 'direction:' + obj.dir;

        img_b.style.transform = "rotateY(" + (first.y - obj.g) + "deg) rotateZ(" + -(first.z - obj.a) + "deg) rotateX(" +
            (first.x - obj.b) +
            "deg)";
    };
    o.init();
</script>

</html>